/**
 * @file 用户注册页面
 * @author wangshaozhi(wangshaozhi@baidu.com)
 */

import {useCallback} from 'react';
import {observer} from 'mobx-react';
import {useHistory} from 'react-router-dom';
import {Button, Card, Form, Input, message} from 'antd';
import {useTitle} from 'react-use';
import {encrypt} from '../../utils';
import {REGISTER_URL} from '../../request/url';
import request from 'axios';

// model
import User from '../../model/user';

// icons
import {UserOutlined} from '@ant-design/icons';

// style
import cls from '../Login/index.module.scss';

type ISubmitProps = Omit<User, 'id'>

export const UserRegister = observer(() => {
    const history = useHistory();
    useTitle('用户注册');

    const onFinish = useCallback(async (values: ISubmitProps) => {
        const {
            username,
            password,
            motto,
            avatarUrl
        } = values;
    
        try {
            const res = await request({
                method: 'post',
                url: REGISTER_URL,
                data: {
                    username,
                    password: encrypt(password),
                    motto,
                    avatarUrl
                }
            });
            const tip = res.data.data.msg;
            if (res.data.data.code === 0) {
                message.success('注册成功，即将跳转到登录页面~');
                setTimeout(() => {
                    history.push('/login');
                }, 1000);
                return;
            }
            message.error(tip);
        }
        catch (e) {
            message.error('注册失败');
        }
    }, [history]);

    return (
        <div className={cls.formWrapper}>
            <Card
                className={cls.card}
                title="用户注册"
            >
                <Form
                    labelAlign="left"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="用户名"
                        labelCol={{flex: '0 0 80px'}}
                        name="username"
                        rules={[{required: true, message: '请输入用户名'}]}
                    >
                        <Input
                            type="text"
                            className={cls.input}
                            placeholder="请输入用户名"
                            suffix={<UserOutlined />}
                        />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        labelCol={{flex: '0 0 80px'}}
                        name="password"
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <Input.Password
                            className={cls.input}
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <Form.Item
                        label="头像地址"
                        labelCol={{flex: '0 0 80px'}}
                        name="avatarUrl"
                        rules={[{required: true, message: '请输入头像地址'}]}
                    >
                        <Input
                            className={cls.input}
                            placeholder="请输入头像地址"
                        />
                    </Form.Item>
                    <Form.Item
                        label="座右铭"
                        labelCol={{flex: '0 0 80px'}}
                        name="motto"
                        rules={[{required: true, message: '请输入座右铭'}]}
                    >
                        <Input
                            className={cls.input}
                            placeholder="请输入座右铭"
                        />
                    </Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        shape="round"
                        className={cls.loginBtn}
                    >
                        注册
                    </Button>
                </Form>
            </Card>
        </div>
    );
});